<template>

  <div style="padding: 20px 20px 0px 20px">
<!--    头-->
    <el-form :inline="true" :model="orderInput" class="demo-form-inline">
      <span style="font-size: 35px">订单管理</span>
      <el-form-item style="float: right;margin-top: 8px">
        <el-button type="primary" @click="selectOrder">查询</el-button>
      </el-form-item>
      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="orderInput.order" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="orderInput.user" placeholder="用户名称"></el-input>
      </el-form-item>
      <el-select v-model="orderInput.status" placeholder="订单状态" clearable
                 style="float: right;margin-top: 8px; margin-right: 10px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-form>
<!--    表格-->
    <el-table
        :data="orderData"
        style="width: 100%;"
        :show-overflow-tooltip="false"
        height="792"
        :border="true"
    >
      <el-table-column
          prop="order_sn" label="订单编号" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="nickname" label="用户" :show-overflow-tooltip="true">
      </el-table-column>

      <el-table-column
          prop="price" label="价格" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="NAME" label="团长" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="send_id" label="配送方式" :show-overflow-tooltip="true" :formatter="ps">
      </el-table-column>
      <el-table-column
          prop="address" label="收货地址 联系人" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="STATUS" label="订单状态" :show-overflow-tooltip="true" :formatter="zt">
      </el-table-column>
      <el-table-column
          prop="pay_time" label="支付时间" :show-overflow-tooltip="true" :formatter="sj">
      </el-table-column>
      <el-table-column
        prop="receive_time" label="收货时间" :show-overflow-tooltip="true" :formatter="sj">
    </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="more(scope.$index, scope.row)">详细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
<!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="page"
        :page-size="orderPage.size"
        :total="orderPage.total"
        style="margin-top: 10px;">
    </el-pagination>
<!--    详情-->
    <el-dialog
        :visible.sync="details"
        width="30%"
        :before-close="detailsClose"
        style="text-align: center">
      <el-table
          :data="detailsData"
          style="width: 100%;"
          :show-overflow-tooltip="false"
          :border="true"
      >
        <el-table-column
            prop="sname" label="店铺" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="uname" label="用户" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="pname" label="产品" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="psname" label="产品型号" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="num" label="产品数量" :show-overflow-tooltip="true">
        </el-table-column><el-table-column
          prop="price" label="价格" :show-overflow-tooltip="true">
      </el-table-column>

      </el-table>

    </el-dialog>
  </div>
</template>

<script>
import as from "@/axios/axios";

export default {
name: "Order",
  created() {
    this.selectOrder()
  },
  data(){
  return {
    details:false,
    orderInput:{},
    orderData:[],
    detailsData:[],
    options: [
      {value: 0, label: '未支付'},
      {value: 1, label: '代发货'},
      {value: 2, label: '待收货'},
      {value: 3, label: '已完成'},
      {value: 4, label: '已退款'},
      {value: 5, label: '已取消'},
      ],
    orderPage:{total:1,pages:1,size:14},
  }
  },
  methods:{
    //查询
    selectOrder(){
      as.post("/first/getFirst",{
        community: localStorage.getItem("community"),
        order:this.orderInput.order,
        user:this.orderInput.user,
        status:this.orderInput.status,
        current:this.orderPage.pages,
        size:this.orderPage.size
      }).then((res)=>{
        this.orderData = res.data.data.records
        this.orderPage.total = res.data.data.total
        console.log(res)
      })
    },
    //更多
    more(index,row){
      this.details = true
      console.log(row.id)
      as.post("/third/getThird",{order:row.id}).then((res)=>{
        this.detailsData = res.data.data
        console.log(res)
      })
    },
    //配送
    ps(row, column, cellValue, index){
      if(cellValue==0){
        return '自提'
      }else if(cellValue==1){
        return  "团长配送"}

    },
    //状态
    zt(row, column, cellValue, index){
      if(cellValue==0){
        return '未支付'
      }else if(cellValue==1){
        return  "代发货"}
      else if(cellValue==2){
        return  "待收货"}
      else if(cellValue==3){
        return '已完成'}
      else if(cellValue==4){
        return '已退款'}
      else if(cellValue==5){
        return '已取消'}
    },
    //时间转换
    sj(row, column, cellValue, index){
      if(cellValue==null){
        return cellValue
      }else if(cellValue==0){
        return null
      }
      let i = cellValue * 1000
      let date = new Date(cellValue * 1000)

      /* 年 */
      let year = date.getFullYear();
      /* 月 */
      let month = date.getMonth() + 1;//外国的月份是从0开始的所以要加1
      /* 日 */
      let dd = date.getDate();
      /* 时 */
      let hour = date.getHours();
      /* 分 */
      let miunte = date.getMinutes();
      /* 秒 */
      let second = date.getSeconds();

      return year+"-"+month+"-"+dd+" "+hour+":"+miunte+":"+second
    },
    //分页
    page(i){
      this.orderPage.pages = i
      this.selectOrder()
    },
    //详情关闭
    detailsClose(done){
      this.detailsData=[]
      done()
    }
  }
}
</script>

<style scoped>

</style>